<template>
    <div class="bill-content">
        <yd-navbar :title="chang"></yd-navbar>
        <div class="center">
            <div class="login-img">
                <img v-lazy="'../../lib/public/images/jixianglogo.png'" alt="11">
            </div>
            <div class="content">
                <div class="table">
                    <input type="tel" placeholder="输入你的手机号">
                    <input type="password" placeholder="输入密码">
                    <input type="password" placeholder="再输入你的密码">
                    <div class="code">
                        <input type="text" class="btn2" placeholder="输入图形验证码">
                        <div class="btn3">abcd</div>
                    </div>
                    <div class="code">
                        <input type="text" class="btn2" placeholder="输入手机验证码">
                        <yd-sendcode class="btn4" slot="right" v-model="start" @click.native="sendCode" type="primary"></yd-sendcode>
                    </div>
                    <input class="btn1" type="button" value="注册">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                chang: "注册",
                start: false
            }
        },
        created() {},
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.$parent.$data.showfooter = false
                vm.$parent.$data.showmenu = false
            })
        },
        beforeRouteLeave(to, from, next) {
            this.$parent.$data.showfooter = true
            this.$parent.$data.showmenu = true
            next()
        },
        methods: {
            sendCode() {
                this.$dialog.loading.open('发送中...');
                setTimeout(() => {
                    this.start = true;
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '已发送',
                        icon: 'success',
                        timeout: 1500
                    });
                }, 1000);
            }
        },
        components: {}
    }
</script>
<style scoped>
    .bill-content {
        background-image: url(../../lib/public/images/zhuce.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;

    }
    .center {
        padding-left: 8px;
        padding-right: 8px;
        height: 620px;
    }
    .login-img {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .content {
        width: 88%;
        margin: 0px auto;
        height: 380px;
        background-color: rgba(255, 255, 255, .4);
        border-radius: 10px;
    }
    .table {
        width: 90%;
        margin: 0px auto;
        padding-top: 20px;
    }
    .btn1 {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        color: #fff;
        background: -webkit-linear-gradient(#fff, #1D75D6);
        background: -o-linear-gradient(#fff, #1D75D6);
        background: -moz-linear-gradient(#fff, #1D75D6);
        background: linear-gradient(#eee, #1D75D6);
    }
    .btn2 {
        width: 50%;
    }
    .btn3 {
        width: 40%;
        height: 40px;
        background-color: #FFFFFF;
        line-height: 40px;
        font-size: 17px;
        text-align: center;
        border-radius: 3px;
        color: #ff0000
    }
    .btn4 {
        width: 30%;
        height: 40px;
        background-color: #D9D9D9;
        border-radius: 20px;
        color: #595959
    }
    .code {
        display: flex;
        align-items: baseline;
        justify-content: space-between
    }
</style>

